<template>
  <div>
    <div class="top-wrapper">
      <div class="top">
        <div class="top-left">
          <i class="el-icon-menu"></i>
          <span>商品分类</span>
        </div>
        <div class="top-right">
          <div>
            平板电视
          </div>
          <div>
            马桶
          </div>
          <div>
            沙发
          </div>
          <div>
            热水器
          </div>
        </div>
      </div>
    </div>
    <div class="main-wrapper">
      <div class="main">
        <div class="main-car">
          <el-carousel height="500px" arrow="never">
            <el-carousel-item v-for="item in 4" :key="item">
              <img src="http://how2j.cn/tmall/img/lunbo/2.jpg" alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div @mouseleave="productsList = []; activeCategory = null">
          <div class="categories">
            <div class="category" @mouseover="showProducts(item)" v-for="item in categoriesList" :class="{active:item == activeCategory}">
              {{item.name}}
            </div>
          </div>
          <div class="products" v-show="productsList.length >0 ">
            <a class="product" v-for="item in productsList" @click="jump2Product(item.id)">
              {{item.name}}
            </a>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        productsList:[], // 分类下的产品列表
        activeCategory:null,
      }
    },
    props: {
      categoriesList: {
        type: Array,
        default: []
      },
    },
    methods: {
      // 展示分类下产品列表
      showProducts(category) {
        this.activeCategory = category
        this.productsList = category.products
      },
      // 跳转至产品页
      jump2Product(id){
        this.$router.push('/product?id='+id)
      }
    }
  }
</script>

<style scoped>
  .top-wrapper{
    width: 100%;
    height: 40px;
    background-color: #dd2727;
    margin-top: 40px;
  }
  .top-wrapper .top{
    width: 1024px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    color: white;
    display: flex;
  }
  .top-wrapper .top .top-left{
    background-color: #C60A0A;
    width: 200px;
  }
  .top-wrapper .top .top-left i{
    padding: 0 10px;
  }
  .top-wrapper .top .top-left span{
    font-weight: 600;
    cursor: default;
  }
  .top-wrapper .top .top-right{
    display: flex;
  }
  .top-wrapper .top .top-right>div{
    padding: 0 20px;
    cursor: pointer;
  }
  .main-wrapper{
    background-color: #E8E8E8;
    width: 100%;
    height: 500px;
  }
  .main-wrapper .main{
    width: 1024px;
    height: 500px;
    margin: 0 auto;
    position: relative;
  }
  .main-wrapper .main .main-car{

  }
  .main-wrapper .main .categories{
    width: 200px;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    overflow: hidden;
  }
  .category{
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .category.active{
    background-color: #ffffff;
    color: #0074D9;
  }
  .products{
    width: 824px;
    height: 500px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 200px;
    z-index: 999;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 0 50px;
  }
  .products a{
    display: block;
    height: 50px;
    padding: 0 40px;
    line-height: 50px;
    color: #999999;
    cursor: pointer;
    border-bottom: #eeeeee 1px dashed;
    flex-grow: 100;
  }
  .products a:hover{
    color: #DD2727;
  }
</style>
